<template>
  <div>
    <common-table
      :table-type="tableType"
      :table-data="tableData"
      :on-selection-change="onSelectionChange"
      v-model:total="currentTotal"
      v-model:page="currentPage"
      :handle-current-change="handleCurrentChange"
      :showPagination="true"
    />
  </div>
</template>

<script setup lang="ts">
import CommonTable from "@/components/common/CommonTable.vue";

import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/api";

/*
 * Table
 * eg: {label: '日期', width: '', showType: '', prop: 'date',},
 * showType: img,text,tag,icon
 * ！！！唯一校验在第一个，数据不能有重复
 * */
const tableType = [
  {
    label: "账号",
    width: "",
    rules: [{ required: false, message: "请输入账号", trigger: "blur" }],
    showType: "",
    prop: "acc",
  },
  {
    label: "密码",
    width: "",
    rules: [{ required: false, message: "请输入密码", trigger: "blur" }],
    showType: "",
    prop: "pwd",
  },
  {
    label: "名称",
    width: "",
    rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
    showType: "",
    prop: "name",
  },
  {
    label: "角色",
    width: "",
    rules: [{ required: false, message: "请输入角色", trigger: "blur" }],
    showType: "role_select",
    prop: "role_name",
  },
  {
    label: "状态",
    width: "",
    rules: [{ required: true, message: "请输入状态", trigger: "blur" }],
    showType: "select",
    prop: "state",
  },
  // {label: '备注', width: '', rules: [{required: false, message: '请输入备注', trigger: 'blur'}], showType: 'text', prop: 'remark'}
];

const tableData = ref<any[]>([]);
const tableSelection = ref<any[]>([]);
const onSelectionChange = (val: any[]) => {
  tableSelection.value = val;
};

//Pager
const currentPage = ref(1);
const currentTotal = ref(0);
const handleCurrentChange = (val: number) => {
  getTableData(val);
};
/*
 * Static state
 * */
function getTableData(val: number) {
  api.user.listPageUser(val, 20).then((res: any) => {
    if (res.success) {
      tableData.value = res.data.records;
      currentTotal.value = res.data.total;
    }
  });
}

onMounted(() => {
  getTableData(1);
});
</script>
